<template>
  <div id="mapChart" style="width: 100%; height: 350px;"></div>
</template>
<script>
import echarts from 'echarts';
import 'echarts/map/js/china.js';

export default {
  name: 'MapComponent',
  props: {
    mookers: {
      type: Array,
      required: true
    }
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      let myChart = echarts.init(document.getElementById('mapChart'));

      // 坐标点数据
      let coordinates = this.mookers;

      let convertData = function (data) {
        let res = [];
        data.forEach(item => {
          let geoCoord = [item.longitude, item.latitude];
          res.push({
            name: item.machine_name,
            value: geoCoord.concat([item.update_time]), // 添加更新时间作为详细信息
            machineNo: item.machine_no // 保存机器编号供 tooltip 使用
          });
        });
        return res;
      };

      let option = {
        tooltip: { // 添加 tooltip 配置
          trigger: 'item',
          formatter: function(params) {
            // 自定义提示框内容
            return `${params.data.name}<br/>机器编号: ${params.data.machineNo}<br/>更新时间: ${params.data.value[2]}`;
          }
        },
        backgroundColor: 'rgba(0,0,0,0)',
        geo: {
          map: 'china',
          label: {
            emphasis: {
              show: false
            }
          },
          roam: true,
          zoom: 1.2,
          itemStyle: {
            normal: {
              areaColor: '#3986ee',
              borderColor: '#19b9e8'
            },
            emphasis: {
              areaColor: '#2a333d'
            }
          }
        },
        series: [
          {
            name: '坐标点',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: convertData(coordinates),
            symbolSize: 20,
            label: {
              formatter: '{b}', // 显示标记名称
              position: 'right'
            },
            itemStyle: {
              color: 'red'
            },
            emphasis: { // 高亮样式
              itemStyle: {
                color: 'yellow' // 可以根据需要设置颜色
              },
              label: {
                show: true,
                textStyle: {
                  color: 'black'
                }
              }
            }
          }
        ]
      };

      myChart.setOption(option);
    }
  }
};
</script>